<template>
    <div>
        <!-- 顶部 -->
        <div class="frameheader">
            <div>后台管理系统</div>
            <div>退出</div>
        </div>
        <!-- 侧边栏 -->
        <div class="framesidebar">
            <el-row class="tac">
                <el-col>
                    <el-menu
                        :default-active="activeIndex"
                        class="el-menu-vertical-demo"
                        active-text-color="#ffd04b"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="handleSelect"
                    >
                        <!-- 循环展示菜单 -->
                        <!-- 基于menuItems数组，判断每一项有没有children，则使用el-menu-item, 否则使用el-sub-menu -->
                        <!-- 之所以使用template，是为了更好地组织代码结构 -->
                        <!-- 此处直接使用一个自定义的组件来表示，将menuList作为变量传递给组件进行展示即可 -->
                        <MenuItem :menu-list="menuItems" />
                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <div class="framecontent">
            <!-- 这里可以放置页面的主要内容 -->
            <!-- 将配置数据传递给子组件 -->
            <router-view :configs="configs" />
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, shallowRef, ref, onMounted } from 'vue'
import { HomeFilled, Shop, Setting, InfoFilled, List } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import MenuItem from '@/component/MenuItem.vue' // 导入自定义的菜单组件
import api from '@/../api/api.js'
import request from '@/../api/request.js'

// 获取当前实例
const instance = getCurrentInstance()
// 这是 对象解构赋值（Destructuring Assignment），是 ES6 的语法. 
// instance对象中有一个属性叫做 proxy，它指向当前组件的实例。通过解构赋值，我们可以直接获取这个属性，方便后续使用。
// 等价于 const proxy = instance.proxy
const { proxy } = instance
console.log('当前组件实例:', proxy)

// 配置数据
const configs = ref({})

// 获取配置数据
const fetchConfigs = async () => {
    try {
        console.log('开始获取配置数据:', api.confUrl.confList)
        
        // 发起GET请求获取配置
        const req = new request(api.confUrl.confList, {})
        const response = await req.doGet()
        
        console.log('配置数据响应:', response)
        
        if (response && response.code === 0) {
            // 请求成功，保存配置数据
            configs.value = response.data?.configs || {}
            console.log('配置数据获取成功:', configs.value)
            ElMessage.success('系统配置加载成功')
        } else {
            // 请求失败
            console.error('获取配置失败:', response?.message)
            ElMessage.error(response?.message || '获取系统配置失败')
            configs.value = {}
        }
    } catch (error) {
        console.error('获取配置异常:', error)
        ElMessage.error('系统配置加载失败，请刷新页面重试')
        configs.value = {}
    }
}

// 侧边栏菜单数组
const menuItems = shallowRef([
    { index: '0', icon: HomeFilled, label: '欢迎页面', children: [], router: 'dashboard' },
    {
        index: '1',
        icon: Shop,
        label: 'SH管理',
        router: '',
        children: [
            { index: '1-1', label: 'SH管理', router: '' },
            { index: '1-2', label: 'XM管理', router: '' },
            { index: '1-3', label: 'FA管理', router: '' },
            {
                index: '1-4',
                label: 'SH配置管理',
                children: [{ index: '1-4-1', label: 'SHPAY渠道配置', router: '' }]
            }
        ]
    },
    {
        index: '2',
        icon: Setting,
        label: '系统管理',
        router: '',
        children: [
            { index: '2-1', label: '用户管理', router: 'user' },
            { index: '2-2', label: '权限管理'}
        ]
    },
    {
        index: '3',
        icon: List,
        label: '订单管理',
        children: [
            { index: '3-1', label: '订单列表', router: 'order' },
        ]
    },
    {
        index: '4',
        icon: List,
        label: '内容管理',
        children: [
            { index: '4-1', label: '文章列表', router: 'content' },
        ]
    },
    { index: '5', icon: InfoFilled, label: '其他', children: [] }
])
// 侧边栏选中项
const activeIndex = ref('0')

// 菜单选中时的回调
const handleSelect = (index, indexPath) => {
    console.log('选中菜单:', index, indexPath)
    localStorage.setItem('activeIndex', index)
    activeIndex.value = index // 更新选中项
}
const handleOpen = (key, keyPath) => {
    console.log('打开菜单:', key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log('关闭菜单:', key, keyPath)
}

// 生命周期函数处理
onMounted(() => {
    console.log('HomePage 组件挂载，开始初始化')
    
    // 从 localStorage 中获取上次选中的菜单项
    const savedIndex = localStorage.getItem('activeIndex')
    if (savedIndex) {
        activeIndex.value = savedIndex
    }
    
    // 获取系统配置数据
    fetchConfigs()
})
</script>

<style scoped>
/* 顶部导航栏 */
/* 使用flex布局，设置高度、背景色、字体颜色等 */
.frameheader {
    height: 50px;
    background-color: #409eff;
    /* 蓝色背景 */
    color: #ffffff; /* 白色字体 */
    display: flex;
    justify-content: space-between; /* 弹性布局之 左右排列 */
    align-items: center; /* 垂直居中 */
    padding: 0 20px;
}
.frameheader div:nth-child(1) {
    font-size: 18px;
    padding-left: 22px;
}
.frameheader div:nth-child(2) {
    padding-right: 22px;
    cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 左侧侧边栏 */
.framesidebar {
    width: 200px;
    background-color: #f5f5f5;
    height: calc(100vh - 50px); /* 减去顶部的高度 */
    position: fixed; /* 固定在左侧 */
    top: 50px; /* 距离顶部50px */
    left: 0;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    overflow-y: auto; /* 如果内容超出，允许滚动 */
}

/* 右侧内容区域 */
.framecontent {
    position:absolute;
    left: 200px; /* 距离左侧200px */
    top: 50px; /* 距离顶部50px */
    right: 0; /* 距离右侧0px */
    bottom: 0; /* 距离底部0px */
    padding: 20px; /* 内边距 */
    background-color: #ffffff; /* 白色背景 */
    overflow-y: auto; /* 如果内容超出，允许滚动 */
}
</style>